import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Layout, UI, useThemeColors } from '@gaozh1024/rn-toolkit';

const AvatarTestScreen: React.FC = () => {
  const colors = useThemeColors();

  const styles = StyleSheet.create({
    section: { marginBottom: 16 },
    row: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 12 },
    card: { borderRadius: 12, borderWidth: 1, borderColor: colors.border },
  });

  const demoUsers = [
    { name: 'Ada Lovelace' },
    { name: 'Alan Turing' },
    { name: 'Grace Hopper' },
    { name: '林纳斯 托瓦兹' },
  ];

  return (
    <Layout.Page headerShown headerProps={{ title: 'Avatar 测试', backVisible: true }} padding={16} scrollable>
      {/* 基础尺寸与形状 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>基础尺寸与形状</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>size: small / medium / large；shape: circle / rounded / square</UI.Text>
          <View style={styles.row}>
            <UI.Avatar name={demoUsers[0].name} size="small" shape="circle" testID="avatar-basic-small-circle" />
            <UI.Avatar name={demoUsers[1].name} size="medium" shape="rounded" testID="avatar-basic-medium-rounded" />
            <UI.Avatar name={demoUsers[2].name} size="large" shape="square" testID="avatar-basic-large-square" />
          </View>
        </Layout.Card>
      </View>

      {/* 自定义像素尺寸 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>自定义尺寸</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>size: number（如 56）</UI.Text>
          <View style={styles.row}>
            <UI.Avatar name={demoUsers[0].name} size={56} shape="circle" testID="avatar-custom-56-circle" />
            <UI.Avatar name={demoUsers[1].name} size={56} shape="rounded" testID="avatar-custom-56-rounded" />
            <UI.Avatar name={demoUsers[2].name} size={56} shape="square" testID="avatar-custom-56-square" />
          </View>
        </Layout.Card>
      </View>

      {/* 图片加载与失败回退 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>图片加载与失败回退</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>src 加载成功则显示图片；失败则显示基于 name 的首字母。</UI.Text>
          <View style={styles.row}>
            <UI.Avatar src={'https://picsum.photos/seed/ava1/200'} name={demoUsers[0].name} size={44} shape="circle" testID="avatar-image-success" />
            <UI.Avatar src={'https://invalid.domain/404.png'} name={demoUsers[1].name} size={44} shape="circle" testID="avatar-image-fallback" />
          </View>
        </Layout.Card>
      </View>

      {/* 在线状态徽标 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>状态徽标</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>status: online / offline</UI.Text>
          <View style={styles.row}>
            <UI.Avatar name="在线用户" size={36} status="online" testID="avatar-status-online" />
            <UI.Avatar name="离线用户" size={36} status="offline" testID="avatar-status-offline" />
          </View>
        </Layout.Card>
      </View>

      {/* 间距与盒子属性（边框） */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>间距与盒子属性</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>支持 m/mh/mv 等 SpacingProps；支持 BoxProps 的边框与尺寸。</UI.Text>
          <View style={styles.row}>
            <UI.Avatar name="Spacing" size={36} m={8} testID="avatar-spacing-m" />
            <UI.Avatar name="Border" size={44} borderWidth={2} borderColor={colors.primary} testID="avatar-box-border" />
            <UI.Avatar name="SizeProps" width={60} height={60} shape="rounded" testID="avatar-box-size" />
          </View>
        </Layout.Card>
      </View>

      {/* 头像组：重叠与最大展示数 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>头像组</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>overlap 控制重叠距离；max 控制最大显示数量，其余显示 +N。</UI.Text>
          <View style={{ gap: 12 }}>
            <UI.AvatarGroup
              items={[
                { name: 'Alice' },
                { name: 'Bob' },
                { name: 'Charlie' },
                { name: 'Diana' },
              ]}
              size="medium"
              shape="circle"
              overlap={12}
              testID="avatar-group-overlap"
            />
            <UI.AvatarGroup
              items={[
                { name: 'Alice' },
                { name: 'Bob' },
                { name: 'Charlie' },
                { name: 'Diana' },
                { name: 'Eve' },
              ]}
              size={40}
              shape="rounded"
              max={3}
              testID="avatar-group-max"
            />
          </View>
        </Layout.Card>
      </View>

      {/* 阴影：预设与自定义 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>阴影测试</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>shadowSize 预设（sm/md/lg）以及自定义 shadow 属性</UI.Text>
          <View style={styles.row}>
            <UI.Avatar name="Sm" size={44} shape="circle" shadowSize="sm" testID="avatar-shadow-sm" />
            <UI.Avatar name="Md" size={44} shape="circle" shadowSize="md" testID="avatar-shadow-md" />
            <UI.Avatar name="Lg" size={44} shape="circle" shadowSize="lg" testID="avatar-shadow-lg" />
            <UI.Avatar name="Cus" size={48} shape="rounded" shadowColor={colors.primary} shadowOffset={{ width: 0, height: 2 }} shadowOpacity={0.35} shadowRadius={6} testID="avatar-shadow-custom" />
          </View>
        </Layout.Card>
      </View>
    </Layout.Page>
  );
};

export default AvatarTestScreen;